<template>
	<view class='content-body-list'>	
		<template v-if="isfirstloading">
			<van-skeleton>
				<view v-for="key in skeleton" class='body-list-info' :key="key">
					<view class='item-info'>
						<view class='list-info-left' style='width:105rpx;'>
							<!-- <van-skeleton-avatar shape="rounded" size="large"/> -->
						</view>
						<view class='list-info-right'>
							<!-- <van-skeleton-paragraph /> -->
						</view>
					</view>
				</view> 
			</van-skeleton>
		</template>
		<template v-else>
			<view v-for="(item, index) in items" class='body-list-info' :key="index" @click="toDetailsPage" :data-id="item.id">
				<view class='item-info'>
					<view class='list-info-left' v-if="item.slt">
						<image :src="item.slt" class='list-info-img' mode="widthFix"></image>
					</view>
					<view class='list-info-right'>
						<view :class="item.slt ? 'list-title' : 'list-title noimg-title'">{{ item.bt }}</view> 
						<view class='list-source'>{{ item.ly+'  ' }}  {{ item.rq }}</view>
					</view>
				</view>
			</view> 
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			isfirstloading: {
				type: Boolean,
				value: false
			},
			pageNumber: {
			  type: String,
			  value: ""
			},
			items: {
			  type: Array,
			  value: ""
			}
		},
		data () {
			return {
				skeleton: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
			}
		},
		methods: {
			toDetailsPage: function (e) {
				let app = getApp();
				const setParaMap = new Map ([
					["index", () => {app.globalData.isReload.index = false;}],
					["recommend", () => {app.globalData.isReload.recommend = false;}],
					["trend", () => {app.globalData.isReload.trend = false;}],
					["thermal", () => {app.globalData.isReload.thermal = false;}],
					["default", () => {}]
				])
				let action = setParaMap.get(`${this.pageNumber}`) || setParaMap.get('default')
				action.call(this)
				this.$emit('toDetailsPage', e.currentTarget.dataset.id)
			}
		}
	}
</script>

<style scoped>
	.content-body-list .body-list-info{
	  border-bottom: 1rpx solid #f2f2f2;
	}
	.content-body-list .body-list-info .item-info{
		padding: 30rpx 0rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
	.content-body-list .body-list-info .list-info-left{
	  width: 225rpx;
	  height: 145rpx;
		position: relative;
		overflow: hidden;
		margin-right: 20rpx;
		-webkit-box-flex: 0;
		-webkit-flex: none;
		flex: none;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		border-radius:10rpx;
	}
	.content-body-list .body-list-info .list-info-img{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate3d(-50%, -50%, 0);
		max-width: 250rpx;
		height: auto;
	}
	.content-body-list .body-list-info .list-info-right{
	  position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		padding-top: 6rpx;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		min-width: 0;
		padding-top: 10rpx;
	}
	.list-title{
	  color:#000;
		font-size:30rpx;
		height:76rpx;
		line-height:38rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
	.list-title.noimg-title {
		height:auto;
		max-height: 76rpx;
		min-height: 38rpx;
	}
	.list-source{
	  color:#919191;
		margin-top:25rpx;
		font-size:24rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		line-height:30rpx;
	}
</style>
